<template>
	<div class=""
		style="position: relative; width: 100%; background-color: #f5f8fa;padding: 5rem 0;display: flex;justify-content: center;flex-direction: column;">
		<div class="container">
			<div class="row justify-content-center">
				<div class="row_item col-md-4  p-4 d-flex justify-content-center" v-for="item in cardList"
					:key="item.id" @click="handleClick(item)" v-if="!isShow">
					<div class="card" style="height: 50vh;">
						<img class=" card-img-top" :src="item.img" alt="">
						<div class="card-img-overlay text-light">
							<h3 class="card-text mt-4">{{ item.imgText }}</h3>
						</div>
						<div class="card-body">
							<h5 class="card-title" style="color: #1d6bff;font-weight: 700;">{{ item.title }}</h5>
							<p class="card-text text-left">{{ item.content }}</p>
						</div>
						<div class="card-footer text-left pt-4">
							<small class="text-muted">{{ item.time }}</small>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="container p-4" style="min-height: 80vh;">
			<com-block @handleClode="handleClode" :isShow="isShow" :acTive="acTive"></com-block>
		</div>
	</div>
</template>

<script>
import ComBlock from '@/components/ComBlock.vue'
export default {
	components: {
		ComBlock
	},
	data() {
		return {
			isShow: false,
			acTive: {},
			cardList: [
				{
					id: 0,
					img: 'https://www.fluxmq.com/static/img/bg1.afd4f597.jpg',
					imgText: 'KAFKA桥接',
					title: '如何利用FluxMQ完成动态写入KAFKA主题',
					content: '如何利用FluxMQ完成动态写入KAFKA主题',
					time: '2023-07-25 12:00'
				},
				{ id: 1, img: 'https://www.fluxmq.com/static/img/bg2.bf67835a.jpg', imgText: 'Mysql存储', title: 'FluxMQ支持RDBMS持久化', content: '为了更好支持集群迁移，重用集配置FIuXMQ支持RDBMS持久化，目前支持Mysql，后续会支持更多的RDBMS', time: '2023-07-25 12:00' },
				{ id: 2, img: 'https://www.fluxmq.com/static/img/bg3.51749136.jpg', imgText: 'FluxMQ-2.0', title: 'FluxMQ-2.0版本更新内容', content: 'FluxMQ-2.0完成性能的提升，功能的增强支持更多的协议，更多的场景，更多的业务', time: '2023-07-11 12:00' },
				{ id: 3, img: 'https://www.fluxmq.com/static/img/bg4.9fb0e136.jpg', imgText: 'FluxMQ', title: '产品介绍', content: '如何利用FluxMQ完成动态写入KAFKA主题', time: '2023-05-31 09:00' },
			]
		}
	},
	methods: {
		handleClode() {
			this.isShow = false
		},
		handleClick(item) {
			this.isShow = true
			this.acTive = item
		}
	}
}
</script>

<style lang="scss" scoped>
.col {}

.card {
	width: 22rem;
	height: 22rem;

}

.row_item {}

.card-title {
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.card-footer {
	background-color: #fff;
	border: none;
}
</style>